<template>
  <f7-page>
    <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">标签</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div>


    <f7-list class="qm-list">
      <f7-list-item title="我的" link>
        <template #after>
          <qm-tag color="#4686ff">标签</qm-tag>
        </template>
      </f7-list-item>
      <f7-list-item title="设置" link>
        <template #after>
          <qm-tag color="#e8f1ff" text-color="#3385FF"
            >标签</qm-tag
          >
        </template>
      </f7-list-item>
      <f7-list-item title="个人信息" link>
        <template #after>
          <qm-tag plain color="#3385FF">标签</qm-tag>
        </template>
      </f7-list-item>
      <f7-list-item title="xx" link>
        <template #after>
          <qm-tag color="#e8f1ff" text-color="#3385FF">
            <div
              style="
                height: 10px;
                width: 10px;
                background: #ccc;
                margin-right: 5px;
              "
            ></div>
            标签
          </qm-tag>
        </template>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
</style>
